<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Various Animation</title>
    <script src="../Vue.js" type="text/javascript"></script>
    <style>
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>

    <div id="app">

        <!--CSS动画过渡-->
        <transition name="bounce">
            <div v-if="isShow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</div>
        </transition>

        <button @click="Toggle">点一下</button>
    </div>

<script>
	let app = new Vue({
		el:"#app",
		data:{
			isShow:true
		},
		methods:{
			Toggle:function () {
				this.isShow = !this.isShow
			}
		}
	})
</script>

</body>
</html>